<template>
  <div>
    <el-dialog
      :title="type===0?'添加数据':'编辑数据'"
      :visible.sync="dialogVisible"
      width="80%"
      :close-on-click-modal="false"
      @close="close">
      <div>
        <div class="list">
            <div class="list-item" v-for="item in localInfo">
              <div class="list-item-label">{{item.name}}</div>
              <div class="list-item-value ">
                <el-input  v-model="item.value"></el-input>
              </div>

            </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
    <el-button @click="close">取 消</el-button>
    <el-button type="primary" @click="query">确 定</el-button>
  </span>
    </el-dialog>



  </div>
</template>

<script>
import {deepClone} from "@/utils";
import refer from "../../refer"
import {insertRecords} from "@/api/IOT/index"
export default {
  name: "index",
  props:{
    type:{
      type:Number,
      default:0
    },
    row:{
      type:Array,
      default:()=>([])
    }
  },
  data(){
    return {
      dialogVisible:true,
      localInfo:{},
      refer:refer
    }
  },
  created() {
    this.localInfo = refer.map(item=>{
      return {
        properties:item.properties,
        name:item.name,
        mqttUser:"xxx",
        value:""
      }
    })

  },

  methods:{
    close(){
      this.$emit("close")
    },
    query(){
      for (let i = 0; i < this.localInfo.length; i++) {
        const item = this.localInfo[i]
        if(!item.value) {
          this.$message({
            type:"error",
            message:`请填写${item.name}的值`
          })
          return
        }
      }

      const filterResult = this.localInfo
      // console.log(filterResult)
      insertRecords({
        records:filterResult
      }).then(res=>{
        console.log(res)
        if(res.code == 200){
          this.$message({
            type: 'success',
            message: '添加成功!'
          });
          this.close()
        }else {
          this.$message({
            type: 'warning',
            message: res.msg
          });
        }

      })
    }
  }
}
</script>

<style scoped>
.list-item-value {
  margin: 10px 0;
}
.no-value {
  color: #333;
  font-weight: bold;
}
</style>
